<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的佣金</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <style>
        .content {
            margin: 0;
            padding: 0;
        }
        .row-showToolBar {
            margin-top: 0.5rem;
            background: rgba(255, 255, 255, 1);
            height: 3rem;
            text-align: center;
        }

        .col-33 {
            height: 3rem;
            border-right: 0.01rem solid rgba(238, 238, 238, 1);
        }

        .totalCommAmount {
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 4.5rem;
            background: rgba(255, 255, 255, 1);
        }

        .totalCommText {
            text-align: center;
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
        }

        .totalCommNum {
            text-align: center;
            font-size: 1.8rem;
            font-family: MicrosoftYaHei-Bold;
            color: rgba(232, 56, 13, 1);
        }

        .imgAndDesc {
            display: -webkit-flex;
            display: flex;
            justify-content: center;
            margin-top: 0.3rem;
        }

        .imgAndDesc img {
            height: 0.8rem;
            width: 0.8rem;
        }

        .imgAndDesc .desc {
            font-size: 0.6rem;
            font-family: MicrosoftYaHei;
            color: rgba(102, 102, 102, 1);
        }

        .amount {
            text-align: center;
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(232, 57, 13, 1);
        }

        .timeOpt {
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            margin-top: 0.5rem;
        }

        .last-week {
            margin-left: 3rem;
            background: rgba(255, 255, 255, 1);
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
            border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
            width: 4rem;
            height: 1.8rem;
            text-align: center;
            line-height: 1.8rem;
        }

        .next-week {
            margin-right: 3rem;
            background: rgba(255, 255, 255, 1);
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
            border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
            width: 4rem;
            height: 1.8rem;
            text-align: center;
            line-height: 1.8rem;
        }

        .chartMain {
            height: 15rem;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
        }

        .chartMain #main {
            height: 15rem;
            width: 15rem;
        }

        .withdrawBtn {
            margin-top: 0.5rem;
            display: -webkit-flex;
            display: flex;
            justify-content: center;
        }

        .btn {
            width: 15rem;
            height: 2rem;
            background-color: #FF9326;
            border-radius: 1rem 1rem 1rem 1rem;
            text-align: center;
            line-height: 2rem;
            color: rgba(255, 255, 255, 1);
        }
    </style>
</head>

<body>
    <!-- 你的html代码 -->
    <div class="page">
        <!--<header class="bar bar-nav">-->
            <!--<a class="button button-link button-nav pull-left" data-transition='slide-out'>-->
                <!--<span class="icon icon-left"></span>-->
                <!--返回-->
            <!--</a>-->
            <!--<h1 class="title">我的佣金</h1>-->
        <!--</header>-->
        <nav class="bar bar-tab">
            <a class="tab-item" href="../index.html">
                <span class="icon icon-home"></span>
                <span class="tab-label">首页</span>
            </a>
            <a class="tab-item" href="../category.html">
                <span class="icon icon-menu"></span>
                <span class="tab-label">分类</span>
            </a>
            <a class="tab-item" href="../cart.html">
                <span class="icon icon-cart"></span>
                <span class="tab-label">购物车</span>
            </a>
            <a class="tab-item active" href="../personal.html">
                <span class="icon icon-me"></span>
                <span class="tab-label">我的</span>
            </a>
        </nav>
        <!-- 这里是页面内容区 -->
        <div class="content">
            <div class="totalCommAmount">
                <span class="totalCommText">我的分销佣金(元)</span>
                <span class="totalCommNum">90000.00</span>
            </div>
            <div class="row row-showToolBar">
                <div class="col-33">
                    <div class="imgAndDesc">
                        <img src="../image/icon_withdraw_already.png" />&nbsp;
                        <span class="desc">已提现</span>
                    </div>
                    <div class="withdraw amount">28000.00</div>
                </div>
                <div class="col-33">
                    <div class="imgAndDesc">
                        <img src="../image/icon_withdraw.png" />&nbsp;
                        <span class="desc">可提现</span>
                    </div>
                    <div class="can-withdraw amount">28000.00</div>
                </div>
                <div class="col-33">
                    <div class="imgAndDesc">
                        <img src="../image/icon_freeze.png" />&nbsp;
                        <span class="desc">不可提现</span>
                    </div>
                    <div class="cannot-withdraw amount">28000.00</div>
                </div>
            </div>
            <div class="timeOpt">
                <div class="last-week">
                    <span class="icon icon-left"></span>上一周</div>
                <div class="next-week">下一周
                    <span class="icon icon-right"></span>
                </div>
            </div>
            <div class="row chartMain">
                <div class="col-100" id="main"></div>
            </div>
            <div class="withdrawBtn">
                <span class="btn" onclick="applyWithdraw();">立即提现</span>
            </div>
        </div>


        <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../js/index.js' charset='utf-8'></script>
        <script src="../js/echarts.simple.min.js"></script>
</body>
<script>
	var withdrawAmount;
	$(function(){
		getCommissionInfo("1");
	});
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
		color:['#EDBE3F', '#77C655'],
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['分销佣金', '销售提成']
        },
        series: [{
            name: '收入来源',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: [{
                    value: 335,
                    name: '分销佣金'
                },
                {
                    value: 1548,
                    name: '总销售额'
                }
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
	
	/**
	 * 申请提现
	 */
	function applyWithdraw(){
		window.location.href="./applyWithdraw.html?q="+withdrawAmount;
	}
	
	function getCommissionInfo(userId){
		$.getJSON(prefix+"/walletInfo/api/getCommissionInfo/"+userId,function(data){
			if(data.code == 0){
				withdrawAmount = data.data.flAvailableAmount;
				$(".cannot-withdraw").text(data.data.flFrostAmount);
				$(".withdraw").text(data.data.flWithdrawAmount);
				$(".can-withdraw").text(data.data.flAvailableAmount);
				$(".totalCommNum").text(data.data.flIncomeAmount);
			}
		});
	}
</script>

</html>
